<template>
    <div>
        <div class="page-content-normal">
            <div class="mode-title">
                <div id="modelText" class="text">{{ mode == 'allow' ? $t('common.allowAccessTitle') : $t('common.denyDenyTitle') }}</div>
                <el-link id="changeModelBtn" class="button" type="primary" :underline="false" @click="openMode" v-if="isShowButton">{{ $t('common.changeModelButton') }}</el-link>
            </div>
        </div>
        <div class="mode-bg" v-if="isShowMode">
            <div class="mode-radio">
                <el-radio id="denyRadio" v-model="modeType" label="deny"> {{ $t('common.denyDenyTitle') }} </el-radio>
                <div id="denyMsg" class="info">
                    {{ denyMsg }}
                </div>
            </div>

            <div class="mode-radio">
                <el-radio id="allowRadio" v-model="modeType" label="allow">
                    {{ $t('common.allowAccessTitle') }}
                </el-radio>
                <div id="allowMsg" class="info">
                    {{ allowMsg }}
                </div>
            </div>

            <div class="btnBox mode-footer">
                <el-button id="modelSaveBtn" type="primary" round @click="save">{{ $t('common.saveButton') }}</el-button>
                <el-button id="modelCancelBtn" type="info" @click="cancel">{{ $t('common.cancelButton') }}</el-button>
            </div>
        </div>
        <div class="page-content-normal">
            <hr />
        </div>
    </div>
</template>

<script>
export default {
    name: 'listMode',
    props: {
        mode: {
            type: String,
            default: '' // deny 黑名单，allow 白名单
        },
        isShowButton: {
            type: Boolean,
            default: true
        },
        denyMsg: {
            type: String,
            default() {
                return this.$t('security.macFilter.denyMsg');
            }
        },
        allowMsg: {
            type: String,
            default() {
                return this.$t('security.macFilter.allowMsg');
            }
        }
    },
    data() {
        return {
            isShowMode: false,
            modeType: this.mode
        };
    },
    watch: {
        $props: {
            handler(newVal) {
                if (newVal) {
                    this.modeType = newVal.mode;
                }
            },
            immediate: true,
            deep: true
        }
    },
    methods: {
        openMode() {
            this.isShowMode = true;
            this.$emit('openMode');
        },
        closeMode() {
            this.isShowMode = false;
            this.$emit('closeMode');
        },
        chModel(type) {
            this.modeType = type;
        },
        save() {
            if (this.mode === this.modeType) {
                return this.closeMode();
            }
            this.$emit('save', this.modeType);
        },
        cancel() {
            this.modeType = this.mode;
            this.closeMode();
        }
    }
};
</script>
<style scoped lang="less">
@import '@/assets/css/theme_blue/component_common.less';
@import '@/assets/css/theme_blue/component_straight.less';

.mode-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .text {
        font-size: 16px;
        font-family: Microsoft YaHei-Bold;
        font-weight: 700;
    }
    .button {
        color: @blueColor;
        font-size: 16px;
        font-family: Microsoft YaHei-Bold;
        font-weight: 700;
    }
}
.mode-radio {
    .info {
        font-size: 14px;
        font-weight: Regular;
        font-family: Microsoft YaHei-Bold;
        margin: 24px 0px 36px 32px;
    }
}
.mode-bg {
    background-color: #00000005;
    overflow: hidden;
    margin-top: 25px;
    padding: 25px 32px;
}
</style>
